<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1,user-scalable=no">
		<meta name="apple-mobile-web-app-capable" content="yes">
		<meta name="apple-mobile-web-app-status-bar-style" content="black">
		<link rel="stylesheet" href="../css/mui.min.css">
		<style>
			html,
			body {
				background-color: #efeff4;
			}
			.mui-content>.mui-table-view:first-child {
				margin-top: 2px;
			}
		</style>
	</head>

	<body>
		<div class="mui-content">
			<ul class="mui-table-view menu" style="margin: 20px 0">
				<li class="mui-table-view-cell mui-media">
					<a href="person-center.html" class="mui-navigate-right">
						<img class="mui-media-object mui-pull-left" src="../img/usr_unlogin.jpg">
						<div class="mui-media-body">
							<span>昵称</span>
							<p class='mui-ellipsis' style="width: 90%;">个性签名个性签名个性签名个性签名个性签名个性签名</p>
						</div>
					</a>
				</li>
			</ul>
			<ul class="mui-table-view menu">
				<li class="mui-table-view-cell">
					<a class="mui-navigate-right" href="feedback.html">
						意见反馈
					</a>
				</li>
				<li class="mui-table-view-cell">
					<a class="mui-navigate-right" href="#share">
						分享给好友
					</a>
				</li>
			</ul>
			<ul class="mui-table-view menu" style="margin-top: 25px;">
				<li class="mui-table-view-cell">
					<a class="mui-navigate-right" href="about.html">
						关于我们
					</a>
				</li>
			</ul>
			<ul class="mui-table-view" style="margin-top: 30px;">
				<li class="mui-table-view-cell">
					<a id="logoff" style="text-align: center;color: #FF3B30;">
						退出登录
					</a>
				</li>
			</ul>
		</div>
		<div id="share" class="mui-popover mui-popover-action mui-popover-bottom">
			<ul class="mui-table-view">
				<li class="mui-table-view-cell">
					<a href="#" id="qq">分享到QQ空间</a>
				</li>
				<li class="mui-table-view-cell">
					<a href="#" id="weibo">分享到微博</a>
				</li>
				<li class="mui-table-view-cell">
					<a href="#" id="wechat">分享到朋友圈</a>
				</li>
			</ul>
			<ul class="mui-table-view">
				<li class="mui-table-view-cell">
					<a href="#" id="cancel"><b>取消</b></a>
				</li>
			</ul>
		</div>
		<script src="../js/mui.min.js"></script>
		<script src="../js/app.js"></script>
		<script type="text/javascript">
			mui.init();
						var templates = {};
			var getTemplate = function(name, header, content, loading) {
				var template = templates[name];
				if (!template) {
					//预加载共用父模板；
					var headerWebview = mui.preload({
						url: header,
						id: name + "-main",
						styles: {
							popGesture: "hide"
						},
						extras: {
							mType: 'main'
						}
					});
					//预加载共用子webview
					var subWebview = mui.preload({
						url: !content ? "" : content,
						id: name + "-sub",
						styles: {
							top: '45px',
							bottom: '0px'
						},
						extras: {
							mType: 'sub'
						}
					});
					subWebview.addEventListener('loaded', function() {
						subWebview.show();
					});
					subWebview.hide();
					headerWebview.append(subWebview);
					//iOS平台支持侧滑关闭，父窗体侧滑隐藏后，同时需要隐藏子窗体；
					if (mui.os.ios) { //5+父窗体隐藏，子窗体还可以看到？不符合逻辑吧？
						headerWebview.addEventListener('hide', function() {
							subWebview.hide("none");
						});
					}
					templates[name] = template = {
						name: name,
						header: headerWebview,
						content: subWebview,
						loaded: loading
					};
				}
				return template;
			};
			
			mui.plusReady(function(){
				getTemplate('setting-template','setting-template.html');
			});
			 //退出登录
			document.querySelector("#logoff").addEventListener('tap', function() {
				plus.nativeUI.showWaiting("正在注销");
				setTimeout(function() {
					plus.storage.clear();
					plus.nativeUI.closeWaiting();
					mui.toast("注销成功");
				}, 500);
			});
			mui('.menu').on('tap', 'a', function() {
				var href = this.href;
				var title = this.innerText;
				if(~href.indexOf('person')){
					title = "个人中心";
				}
				if(href.indexOf('share')<0){
					var template = getTemplate('setting-template');
					var headerWebview = template.header;
					//获得共用子webview
					var contentWebview = template.content;
					mui.fire(headerWebview, 'updateHeader', {
						title: title,
						showMenu: false
					});
					contentWebview.loadURL(href);
					contentWebview.show();
					headerWebview.show('fade-in');
				}
			});
			
			
			mui('body').on('shown', '.mui-popover', function(e) {});
			mui('body').on('hidden', '.mui-popover', function(e) {});
			mui('body').on('tap', '.mui-popover-action li>a', function() {
				var a = this,
					parent;
				for (parent = a.parentNode; parent != document.body; parent = parent.parentNode) {
					if (parent.classList.contains('mui-popover-action')) {
						var id = a.id;
						switch (id) {
							case "cancel":
								mui('#' + parent.id).popover('toggle');
								break;
							case "wechat":
								mui('#' + parent.id).popover('toggle');
								shareAction('weixin', 'WXSceneTimeline');
								break;
							default:
								mui('#' + parent.id).popover('toggle');
								mui.toast("\"" + a.innerText + "\"功能正在紧急修复");
								break;
						}
					}
				}
			});
			var shares = null;
			var sharecontent = '我爱你',
				sharehref = 'http://img5.tvsou.com/forenotice_images/20140804/2014-08-04-04-34-05.jpg',
				sharetitle = '我正在测试微信分享功能',
				sharepic = 'http://img5.tvsou.com/forenotice_images/20140804/2014-08-04-04-34-05.jpg';
			mui.plusReady(function() {
				plus.share.getServices(function(s) {
					shares = {};
					for (var i in s) {
						var t = s[i];
						shares[t.id] = t;
					}
				}, function(e) {
					mui.toast("分享取消");
				});
			});

			function shareMessage(id, s, ex) {
				if (id == 'weixin') {
					var msg = {
						title: sharetitle,
						href: sharehref,
						extra: {
							scene: ex
						}
					};
				} else {
					var msg = {
						content: sharecontent,
						extra: {
							scene: ex
						}
					};
				}
				s.send(msg, function() {
					mui.toast('分享成功');
				}, function() {
					mui.toast('分享取消');
				});
			}

			function shareAction(id, ex) {
				var s = null;
				if (!id || !(s = shares[id])) {
					mui.toast("无效的分享服务！");
					return;
				}
				if (s.authenticated) {
					shareMessage(id, s, ex);
				} else {
					mui.toast("未授权");
					s.authorize(function() {
						shareMessage(id, s, ex);
					}, function() {
						mui.toast("认证授权失败");
					});
				}
			}
		</script>
	</body>

</html>